{"componentChunkName":"component---src-templates-post-tsx","path":"/react-lifecycle/","result":{"data":{"markdownRemark":{"html":"\n
\n

컴포넌트 초기 생성(Mount)

\n

컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API
\n아래의 순서대로 호출 된다.

\n\n

1. constructor( )

\n

컴포넌트 생성자 함수, 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.

\n

2. static getDerivedStateFromProps( )

\n
static getDerivedStateFromProps(prosp,state) {\n  // 여기서는 setState 를 하는 것이 아니라\n  // 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는  형태로 사용된다.\n  /*\n  if (props.value !== state.value) {\n    return { value: props.value };\n  }\n  return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미\n  */\n}
\n

최초 마운트 시와 업데이트 시 모두에서 render 메서드를 호출하기 직전에 호출된다.

\n\n

3. componentDidMount( )

\n

컴포넌트가 마운트된 직후, 즉 컴포넌트가 화면에 나타나게 됐을 때 호출된다. 외부에서 데이터를 불러오기 위해, 네트워크 요청을 보내기 적절한 위치이다.

\n\n
\n

컴포넌트 업데이트

\n

props 또는 state가 변경되어 컴포넌트가 다시 렌더링될 때, 아래의 순서대로 호출된다.

\n\n

1. shouldComponentUpdate( )

\n
shouldComponentUpdate(nextProps, nextState) {\n  // return false 하면 render()를 발생시키지 않는다.\n  // return this.props.checked !== nextProps.checked\n  return true;\n}
\n

이 메서드는 오직 성능 최적화만을 위한 것이다.

\n\n

2. getSnapshotBeforeUpdate( )

\n
getSnapshotBeforeUpdate(prevProps, prevState);
\n

가장 마지막으로 렌더링된 결과가 DOM 등에 반영되었을 때에 호출된다. 이 생명주기 메서드가 반환하는 값은 componentDidUpdate()에 인자로 전달된다.

\n

3. componentDidUpdate( )

\n
componentDidUpdate(prevProps, prevState, snapshot);
\n

이 메서드는 갱신이 일어난 직후에 호출된다.

\n\n
componentDidUpdate(prevProps) {\n  // 전형적인 사용 사례 (props 비교)\n  if (this.props.userID !== prevProps.userID) {\n    this.fetchData(this.props.userID);\n  }\n}
\n
\n

컴포넌트 제거(마운트 해제)

\n\n

1. componentWillUnmount( )

\n
componentWillUnmount() {\n  // 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거\n}
\n

컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.

\n\n
\n

Reference

\n","excerpt":"컴포넌트 초기 생성(Mount) 컴포넌트 업데이트 컴포넌트 제거(마운트 해제) 컴포넌트 초기 생성(Mount) 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 아래의 순서대로 호출 된다. 1. constructor( ) 컴포넌트 생성…","tableOfContents":"","fields":{"slug":"/react-lifecycle/"},"frontmatter":{"title":"React LifeCycle(리액트 생명주기)","date":"May 30, 2019","tags":["React"],"keywords":["react","리액트생명주기","componentlifecycle"],"update":"Jan 01, 0001"}}},"pageContext":{"slug":"/react-lifecycle/","series":[],"lastmod":"2019-05-30"}},"staticQueryHashes":["2027115977","694178885"]}